<template>
  <div class="contantBox" @click="selectHidden">
      <div class="contant">
        <div class="title">
          <div class="left">
            <span></span>{{title}}
          </div>
          <div class="right"></div>
        </div>
        <div class="titleB">
          <SelectEvent :ajaxUrl='ajaxPath.select' ref="select" v-on:selectListClick="monitorSlected"></SelectEvent>
        </div>
        <div class="tableBox">
          <Table></Table>
        </div>
      </div>
  </div>
</template>

<script>
import SelectEvent from './SelectEvent'
import Table from './Table'

export default {
  name: 'contant',
  data () {
    return {
      title:"",
      ajaxPath:{
        select:''
      }
    }
  },
  beforeMount  () {
    var data = this.$parent._data
    this.title = data.title
    this.ajaxPath.select = data.ajaxPath.select
  },
  components:{
    SelectEvent:SelectEvent,
    Table
  },
  methods:{
    monitorSlected(){
      console.log(this.$refs.select.selectedKey)
    },
    selectHidden(){
      this.$refs.select.isOn = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .contantBox {
      width: 100%;
      box-sizing: border-box;
      padding: 20px;
      padding-top: 80px;
      padding-left: 170px;
      height: 100vh;
      display: flex;      
    }

    .contantBox .contant {
      width: 100%;
      height: 100%;
      background: #fff;
      overflow: hidden;
      overflow-y: auto;
    }    

    .contantBox .contant .title {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center; 
      box-sizing: border-box;
      padding-left: 30px;
      padding-right: 40px;
    }

    .contantBox .contant .title .left {
      font-size: 14px;
      color: #75A4E3;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      line-height: 14px;
    }

    .contantBox .contant .title .left span {
      display: block;
      width: 5px;
      height: 14px;
      background: #75A4E3;
      margin-right: 7px;
    }

    .contantBox .contant .titleB {
      height: 40px;
      background: #75A4E3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding-left: 30px;
      padding-right: 40px;
    }

    .contantBox .contant .tableBox {
      width: 100%;
    }

    
    ::-webkit-scrollbar {
      width: 8px;
      height: 16px;
      background-color: #F5F5F5;
    }
    
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 6px rgba(16, 74, 160, 0.3);
      border-radius: 10px;
      background-color: #F5F5F5;
    }
    
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(165, 106, 106, 0.3);
      background-color: rgb(117, 164, 227);
    }
</style>
